import React from 'react'
import { connect } from 'react-redux'

import { WriterWrapper } from '../style'

class Writer extends React.PureComponent {
  render() {
    const { list } = this.props
    return (
      <WriterWrapper>
        <div className="title">
          <span className="text">推荐作者</span>
          <span className="switch">
            <i ref={icon => this.icon = icon} className="iconfont spin">&#xe851;</i>
            换一换
          </span>
        </div>
        <ul>
          {list.map(item => (
            <li href="" className="writerItem" key={item.get('id')}>
            <a href="" className="avatar">
              <img src={item.get('avatarSrc')} alt="" />
            </a>
            <a href="" className="follow">关注</a>
            <a href="" className="name">{item.get('name')}</a>
            <p className="info">
              {item.get('info')}
            </p>
          </li>
          ))}
        </ul>
        <a className="find-more">查看全部</a>
      </WriterWrapper>
    )
  }
}

const mapState = state => {
  return {
    list: state.getIn(['home', 'writerList'])
  }
}

export default connect(
  mapState,
)(Writer)
